/*
 * @Author: zhangzhen
 * @Date: 2023-01-04 15:11:48
 * @LastEditors: zhangzhen
 * @LastEditTime: 2023-02-15 09:17:23
 *
 */
import React, {useContext} from 'react';
import {Col, Select} from 'antd';
import styles from './styles.module.scss';
import {FormContext} from '../../context';
import BasicOperate from './BasicOperate';
import AddOption from './AddOption';

const RadioAndCheckboxOperate = () => {
    const {
        currentIndex,
        formConTextValue,
        setFormConTextValue,
        formRef,
        currentItem,
        setCurrentItem,
    } = useContext(FormContext);

    // 设置值
    const setValue = (key: string, value: any) => {
        const cloneValue = [...formConTextValue];
        cloneValue[currentIndex][key] = value;
        setFormConTextValue(cloneValue);
        setCurrentItem(cloneValue[currentIndex]);
    };

    return (
        <div className={styles.inputOperate}>
            <div className={styles.currentName}>
                {currentItem.key === 'radio' && '单选框'}
                {currentItem.key === 'checkbox' && '多选框'}
            </div>

            {/* 公共配置项 */}
            <BasicOperate>
                <Col span={24}>
                    <div className={styles.operateItem}>
                        <span className={styles.itemName}>默认值:</span>
                        <Select
                            mode={
                                currentItem.key === 'checkbox'
                                    ? 'multiple'
                                    : undefined
                            }
                            placeholder="请选择"
                            value={currentItem.defaultValue}
                            options={currentItem.options}
                            onChange={(value: number) => {
                                setValue('defaultValue', value);
                                formRef?.setFieldValue(currentItem.name, value);
                            }}
                        />
                    </div>
                </Col>
                {/* 选项 */}
                <Col span={24}>
                    <div className={styles.operateItem}>
                        <span className={styles.itemName}>选项:</span>
                        <AddOption />
                    </div>
                </Col>
            </BasicOperate>
        </div>
    );
};

export default RadioAndCheckboxOperate;
